<template>
  <div class="addAdult">
    <div class="add_item" @click="openForm">收银录入</div>
    <div class="dialog_from">
      <!-- 收银工作台 -->
      <el-dialog
        title="收银数据录入"
        width="40%"
        :modal="false"
        :visible.sync="outerVisible"
        @close="resetForm('receiptform')"
        :close-on-click-modal="false"
      >
        <el-form
          :model="receiptform"
          label-width="200px"
          :rules="rules"
          ref="receiptform"
          v-loading="loadingCash"
        >
          <el-form-item label="学员账号:">
            <el-input v-model="receiptform.account" disabled class="divided_2"></el-input>
          </el-form-item>
          <el-form-item label="学员姓名:">
            <el-input v-model="receiptform.username" disabled class="divided_2"></el-input>
          </el-form-item>
          <el-form-item label="实收金额:" prop="payAmount">
            <el-input v-model.trim="receiptform.payAmount" class="divided_2"></el-input>
          </el-form-item>
          <el-form-item label="收款方式:" prop="tradeSource">
            <el-select v-model="receiptform.tradeSource">
              <el-option
                v-for="(pro,i) in payType"
                :key="'pro'+i"
                :label="pro.attributeName"
                :value="pro.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            class="dialog_confirm"
            type="primary"
            @click="cashRegister"
            :disabled="cashBtnDisable"
          >确定录入</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 收银状态提示框 -->
    <div class="cash" v-if="promptShow">
      <transition name="el-fade-in-linear">
        <div class="cash-content">
          <div class="cash_main">
            <div class="cash_text">收银录入成功</div>
          </div>
          <div class="cash_btns">
            <el-button plain @click="dialogVisible=true;getAgentPackageList()">余额购买产品卡</el-button>
            <el-button
              class="dialog_confirm"
              type="primary"
              style="float:right"
              @click="promptShow=false;outerVisible=false"
            >确定</el-button>
          </div>
        </div>
      </transition>
    </div>

    <el-dialog
      title="余额购买"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      :modal="false"
      @close="resetForm('purchaseForm')"
    >
      <el-form
        :model="purchaseForm"
        label-width="140px"
        class="purchaseForm"
        ref="purchaseForm"
        :rules="rules2"
        v-loading="loadingPurchase"
      >
        <el-form-item label="学员姓名:">
          <el-input v-model="purchaseForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="学员账号:">
          <el-input v-model="purchaseForm.account" disabled></el-input>
        </el-form-item>
        <!-- 产品卡 -->
        <div class="addBtnBox">
          <el-button @click="addProduct">增加产品</el-button>
        </div>
        <el-card class="box-card" v-for="(card,index) in packageData" :key="'packageData'+index">
          <template v-if="index!=0">
            <div slot="header" class="clearfix">
              <el-button
                @click="removeProduct(index)"
                id="closeIcon"
                icon="el-icon-close"
                type="text"
              ></el-button>
            </div>
          </template>
          <div class="text item" style="margin: 6px 0;padding: 10px 0 1px 0;">
            <el-form-item label="产品类型：">
              <el-select
                v-model="purchaseForm.packageContains[index].payProductId"
                @change="selectGet"
              >
                <el-option
                  v-for="(pro,i) in packageData[0].productType"
                  :key="'pro'+i"
                  :label="pro.packageName"
                  :value="pro.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品名称：" v-show="purchaseForm.packageContains[index].otherType">
              <el-input v-model.trim="purchaseForm.packageContains[index].remark" class="divided_2"></el-input>
            </el-form-item>
            <el-form-item label="数量：">
              <el-input v-model.trim="purchaseForm.packageContains[index].num" class="divided_2"></el-input>
            </el-form-item>
            <el-form-item label="金额：" v-show="purchaseForm.packageContains[index].otherType">
              <el-input
                v-model.trim="purchaseForm.packageContains[index].payAmount"
                class="divided_2"
              ></el-input>
            </el-form-item>
          </div>
        </el-card>

        <!-- 随单赠送 -->
        <el-card class="box-card" v-for="(card,index) in giftProduct" :key="'gift'+index">
          <div class="text item" style="margin: 6px 0;padding: 10px 0 1px 0;">
            <el-form-item label="产品类型：">
              <el-select
                v-model="purchaseForm.giftCard[index].payProductId"
                @change="selectGet"
                clearable
              >
                <el-option
                  v-for="(pro,i) in card.productType"
                  :key="'pro'+i"
                  :label="pro.packageName"
                  :value="pro.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <span class="giftText">随单赠送</span>
            <el-form-item label="产品名称：" v-show="purchaseForm.giftCard[index].otherType">
              <el-input v-model.trim="purchaseForm.giftCard[index].remark" class="divided_2"></el-input>
            </el-form-item>
            <el-form-item label="数量：">
              <el-input v-model.trim="purchaseForm.giftCard[index].num" class="divided_2"></el-input>
            </el-form-item>
            <el-form-item label="金额：" v-show="purchaseForm.giftCard[index].otherType">
              <el-input v-model.trim="purchaseForm.giftCard[index].payAmount" class="divided_2"></el-input>
            </el-form-item>
          </div>
        </el-card>
        <el-form-item label="余额金额扣除：" style="margin-top:10px;" prop="amount">
          <el-input v-model.trim="purchaseForm.amount"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="dialog_close" @click="dialogVisible = false" :disabled="btnPurchse">取 消</el-button>
        <el-button
          class="dialog_confirm"
          type="primary"
          @click="submitPurchaseForm()"
          :disabled="btnPurchse"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import bus from "./../../../static/js/bus.js";
import base from "./../../api/base.js";
export default {
  data() {
    var validateAmount = (rule, value, callback) => {
      var reg1 = /^[0-9]+([.]{1}[0-9]{1,2}){0,1}$/;
      var reg2 = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
      if(reg2.test(value)){
         this.receiptform.payAmount=Number(this.receiptform.payAmount).toString()
        if(value>0){
          if(reg1.test((Number(value).toString()))){
            callback();
          }else{
            callback(new Error("最小收款单位不能低于分"));
          }
        }else{
          callback(new Error('输入金额需要大于零'))
        }
      }else{
        callback(new Error('输入格式有误'))
      }
    };
    return {
      outerVisible: false,
      loadingCash: false,
      loadingPurchase: false,
      btnPurchse: false,
      //   收银工作台表单数据
      receiptform: {
        memberId: "",
        account: "",
        username: "",
        payAmount: "",
        tradeSource: ""
      },
      rules: {
        payAmount: [
          { required: true, message: "请填写付款金额", trigger: "blur" },
          { validator: validateAmount, trigger: "blur" }
        ],
        tradeSource: [
          { required: true, message: "请选择付款方式", trigger: "blur" }
        ]
      },
      //   余额购买表单数据
      purchaseForm: {
        username: "",
        account: "",
        memberId: "",
        // 产品卡
        packageContains: [
          {
            payProductId: "",
            num: "",
            remark: "",
            payAmount: "",
            tradeType: 2015,
            otherType: false
          }
        ],
        // 随单赠送卡
        giftCard: [
          {
            payProductId: "",
            num: "",
            remark: "",
            payAmount: "",
            tradeType: 2017,
            otherType: false
          }
        ],
        // 余额购买
        amount: ""
      },
      rules2: {
        amount: [
          { required: true, message: "请填写扣除金额", trigger: "blur" },
          { validator: validateAmount, trigger: "blur" }
        ]
      },
      packageData: [{ productType: [] }],
      giftProduct: [{ productType: [] }],
      payType: [
        { label: "支付宝", value: 2 },
        { label: "微信", value: 3 },
        { label: "转账", value: 4 },
        { label: "刷卡", value: 5 },
        { label: "现金", value: 6 }
      ],
      promptShow: false,
      dialogVisible: false,
      studentId: "",
      studentName: "",
      studentPhone: "",
      cashBtnDisable: false
    };
  },
  methods: {
    openForm() {
      if (this.studentId) {
        this.outerVisible = true;
        this.searchInfo();
        this.getPayType();
        // this.getAgentPackageList()
      } else {
        this.alertTip("请选择学员");
      }
    },
 // 搜索学员信息
    searchInfo() {
        this.$axios({
          url: base.baseUrl2 + "/v1/agent/agent-student/search-tel",
          method: "POST",
          header: { "content-type": "application/x-www-form-urlencoded" },
          data: {
            token: localStorage.token,
            tel: this.receiptform.account
          },
          transformRequest: [
            function(data) {
              let ret = "";
              for (let it in data) {
                ret +=
                  encodeURIComponent(it) +
                  "=" +
                  encodeURIComponent(data[it]) +
                  "&";
              }
              return ret;
            }
          ]
        })
          .then(res => {
            if (res.data.status == 4000) {
              this.alertTip(res.data.message);
            } else if (res.data.status == 2000) {
               this.receiptform.username=res.data.data.member.fullName? res.data.data.member.fullName: res.data.data.member.nickname;
            } else if (res.data.status == 2001) {
              this.$router.push("/login");
            }
          })
          .catch(error => {
            this.btnDisabled = false;
            console.log(error);
            this.alertTip(
              "网络异常收银失败，请检查网络稍后再试"
            );
          });
    },
    // 收银事件
    cashRegister() {
      this.$refs.receiptform.validate(valid => {
        if (valid) {
          this.$confirm("确定提交?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消"
          })
            .then(() => {
              this.loadingCash = true;
              this.cashBtnDisable = true;
              var submitData = {};
              submitData.memberId = this.receiptform.memberId;
              submitData.payAmount = this.receiptform.payAmount;
              submitData.tradeSource = this.receiptform.tradeSource;
              submitData.token = localStorage.token;
              this.$axios({
                url: base.baseUrl2 + "/v1/account/member-account/after-input",
                method: "POST",
                header: { "content-type": "application/x-www-form-urlencoded" },
                data: submitData,
                transformRequest: [
                  function(data) {
                    let ret = "";
                    for (let it in data) {
                      ret +=
                        encodeURIComponent(it) +
                        "=" +
                        encodeURIComponent(data[it]) +
                        "&";
                    }
                    return ret;
                  }
                ]
              }).then(res => {
                  this.loadingCash = false;
                  this.cashBtnDisable = false;
                  if (res.data.status == 4000) {
                    this.alertTip(res.data.message);
                  } else if (res.data.status == 2000) {
                    this.purchaseForm.username = res.data.data.fullName? res.data.data.fullName: res.data.data.nickname;
                    this.purchaseForm.account = res.data.data.userName;
                    this.promptShow = true;
                  } else if (res.data.status == 2001) {
                    this.$router.push("/login");
                  }
                })
                .catch(error => {
                  this.loadingCash = false;
                  this.cashBtnDisable = false;
                  console.log(error);
                  this.alertTip(
                    "网络异常收银失败，请检查网络稍后再试"
                  );
                });
            })
            .catch(() => {
              this.cashBtnDisable = false;
              this.loadingCash = false;
            });
        } else {
          this.alertTip("选项有误,不能提交");
        }
      });
    },
    // 添加产品卡
    addProduct() {
      this.packageData.push(this.packageData[0]);
      this.purchaseForm.packageContains.push({
        payProductId: "",
        num: "",
        remark: "",
        payAmount: "",
        tradeType: 2015,
        otherType: false
      });
    },
    // 删除产品卡
    removeProduct(index) {
      this.$confirm("是否确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.packageData.splice(index, 1);
        this.purchaseForm.packageContains.splice(index, 1);
      });
    },
    // 获取付款方式
    getPayType() {
      this.$axios({
        url: base.baseUrl2 + "/v1/account/member-account/get-attribute",
        method: "POST",
        header: { "content-type": "application/x-www-form-urlencoded" },
        data: {
          token: localStorage.token
          // token: "9f063cd31dd559824941e3d47fc69abc#100230",
        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          }
        ]
      })
        .then(res => {
          if (res.data.status == 4000) {
            this.alertTip(res.data.message);
          } else if (res.data.status == 2000) {
            this.payType = res.data.data.attributeInfo;
            // console.log(this.payType)
          } else if (res.data.status == 2001) {
            this.$router.push("/login");
          }
        })
        .catch(error => {
          console.log(error);
          this.alertTip(
            "网络异常收银失败，请检查网络稍后再试"
          );
        });
    },
    // 获取代理商设置的套餐列表
    getAgentPackageList() {
      this.$axios({
        url: base.baseUrl2 + "/v1/agent/agent-package/list",
        method: "POST",
        header: { "content-type": "application/x-www-form-urlencoded" },
        data: {
          token: localStorage.token,
          // token: "9f063cd31dd559824941e3d47fc69abc#100230",
          type: 1
        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          }
        ]
      })
        .then(res => {
          if (res.data.status == 4000) {
            this.alertTip(res.data.message);
          } else if (res.data.status == 2000) {
            // this.packageData.productType = res.data.data.productPackage;
            this.packageData[0].productType = res.data.data.productPackage;
            this.packageData[0].productType.push(res.data.data.otherPackage[0]);
            this.giftProduct[0].productType = this.packageData[0].productType;
          } else if (res.data.status == 2001) {
            this.$router.push("/login");
          }
        })
        .catch(error => {
          console.log(error);
          this.alertTip(
            "网络异常收银失败，请检查网络稍后再试"
          );
        });
    },
    // 产品卡的选择
    selectGet() {
      // 产品套餐卡
      this.purchaseForm.packageContains.forEach(el => {
        if (el.payProductId == 99) {
          el.otherType = true;
        } else {
          el.otherType = false;
        }
      });
      // 随单赠送
      this.purchaseForm.giftCard.forEach(el => {
        if (el.payProductId == 99) {
          el.otherType = true;
        } else {
          el.otherType = false;
        }
        if (el.payProductId == "") {
          el.num = "";
          el.remark = "";
          el.payAmount = "";
        }
      });
    },
    //余额购买提交事件
    submitPurchaseForm() {
      this.$refs.purchaseForm.validate(valid => {
        if (valid) {
          this.purchaseForm.packageContains.some(el => {
            if (el.num == "") {
              this.alertTip("产品卡数量不能为空");
              return true;
            }
            if(/^[0-9.]+$/.test(el.num)){
                el.num=Number(el.num).toString()
                if(el.num<=0){
                    this.alertTip('产品卡数量需要大于零');
                    return true;
                }
                if(!(/^[1-9]\d*$/.test(el.num))){
                    this.alertTip('产品卡数量输入格式有误');
                    return true;
                }
            }else{
                this.alertTip("产品卡数量输入格式有误");
                return true;
            }
            if (el.payProductId == "") {
              this.alertTip("产品卡类型不能为空");
              return true;
            }
            if (el.payProductId == 99) {
              if (el.num == "") {
                this.alertTip("产品卡数量不能为空");
                return true;
              }
              if (el.remark == "") {
                this.alertTip("产品名称不能为空");
                return true;
              }
              if (el.payAmount == "") {
                this.alertTip("产品卡金额不能为空");
                return true;
              }
              if(/^[0-9]+([.]{1}[0-9]+){0,1}$/.test(el.payAmount)){
                    el.payAmount=Number(el.payAmount).toString()
                    if(el.payAmount>0){
                        if(/^[0-9]+([.]{1}[0-9]{1,2}){0,1}$/.test(el.payAmount)){
                        }else{
                            this.alertTip('产品金额最小收款单位不能低于分')
                            return true
                        }
                    }else{
                        this.alertTip('输入金额需要大于零')
                        return true;
                    }
                }else{
                    this.alertTip('输入的金额格式有误')
                    return true;
                }
            }
            if (
              (this.purchaseForm.giftCard[0].payProductId == "" &&
                this.purchaseForm.giftCard[0].num == "" &&
                this.purchaseForm.giftCard[0].remark == "" &&
                this.purchaseForm.giftCard[0].payAmount == "") ||
              (this.purchaseForm.giftCard[0].payProductId != "" &&
                this.purchaseForm.giftCard[0].num != "")
            ) {
                    if(this.purchaseForm.giftCard[0].payProductId != ""){
                    if(/^[0-9.]+$/.test(this.purchaseForm.giftCard[0].num)){
                        this.purchaseForm.giftCard[0].num=Number(this.purchaseForm.giftCard[0].num).toString()
                        if(this.purchaseForm.giftCard[0].num<=0){
                            this.alertTip('随单赠送的产品卡数量需要大于零');
                            return true;
                        }
                        if(!(/^[1-9]\d*$/.test(this.purchaseForm.giftCard[0].num))){
                            this.alertTip('随单赠送的产品卡数量输入格式有误');
                            return true;
                        }
                    }else{
                        this.alertTip("随单赠送的产品卡数量输入格式有误");
                        return true;
                    }
                }
                if(this.purchaseForm.giftCard[0].payProductId ==99){
                    if(/^[0-9.]+$/.test(this.purchaseForm.giftCard[0].num)){
                        this.purchaseForm.giftCard[0].num=Number(this.purchaseForm.giftCard[0].num).toString()
                        if(this.purchaseForm.giftCard[0].num<=0){
                            this.alertTip('随单赠送的产品卡数量需要大于零');
                            return true;
                        }
                        if(!(/^[1-9]\d*$/.test(this.purchaseForm.giftCard[0].num))){
                            this.alertTip('随单赠送的产品卡数量输入格式有误');
                            return true;
                        }
                    }else{
                        this.alertTip("随单赠送的产品卡数量输入格式有误");
                        return true;
                    }
                    if(/^[0-9]+([.]{1}[0-9]+){0,1}$/.test(this.purchaseForm.giftCard[0].payAmount)){
                        this.purchaseForm.giftCard[0].payAmount=Number(this.purchaseForm.giftCard[0].payAmount).toString()
                        if(this.purchaseForm.giftCard[0].payAmount>0){
                            if(/^[0-9]+([.]{1}[0-9]{1,2}){0,1}$/.test(this.purchaseForm.giftCard[0].payAmount)){
                            }else{
                                this.alertTip('产品金额最小收款单位不能低于分')
                                return true
                            }
                        }else{
                            this.alertTip('输入金额需要大于零')
                            return true;
                        }
                    }else{
                        this.alertTip('输入的金额格式有误')
                        return true;
                    }
            }
            
            } else {
              if (this.purchaseForm.giftCard[0].payProductId != "") {
                if (this.purchaseForm.giftCard[0].num == "") {
                  this.alertTip("随单赠送的产品卡数量不能为空");
                  return true;
                }
              }
              if (this.purchaseForm.giftCard[0].num != "") {
                if (this.purchaseForm.giftCard[0].payProductId == "") {
                  this.alertTip("随单赠送的产品类型不能为空");
                  return true;
                }
              }
            }
            if (this.purchaseForm.giftCard[0].payProductId == 99) {
              if (this.purchaseForm.giftCard[0].num == "") {
                this.alertTip("随单赠送中的产品卡数量不能为空");
                return true;
              }
              if (this.purchaseForm.giftCard[0].remark == "") {
                this.alertTip("随单赠送中的产品名称不能为空");
                return true;
              }
              if (this.purchaseForm.giftCard[0].payAmount == "") {
                this.alertTip("随单赠送中的产品卡金额不能为空");
                return true;
              }
            }
            this.$confirm("确定提交?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消"
            }).then(() => {
              this.btnPurchse = true;
              this.loadingPurchase = true;
              var submitData = {};
              submitData.amount = this.purchaseForm.amount;
              submitData.memberId = this.purchaseForm.memberId;
              submitData.packageContains = [];
              this.purchaseForm.packageContains.forEach((el, index) => {
                submitData.packageContains.push({});
                submitData.packageContains[index].num = el.num;
                submitData.packageContains[index].payAmount = el.payAmount;
                submitData.packageContains[index].payProductId =
                  el.payProductId;
                submitData.packageContains[index].remark = el.remark;
                submitData.packageContains[index].tradeType = el.tradeType;
              });
              if (this.purchaseForm.giftCard[0].payProductId != "") {
                submitData.packageContains.push({});
                submitData.packageContains[
                  submitData.packageContains.length - 1
                ].num = this.purchaseForm.giftCard[0].num;
                submitData.packageContains[
                  submitData.packageContains.length - 1
                ].payAmount = this.purchaseForm.giftCard[0].payAmount;
                submitData.packageContains[
                  submitData.packageContains.length - 1
                ].payProductId = this.purchaseForm.giftCard[0].payProductId;
                submitData.packageContains[
                  submitData.packageContains.length - 1
                ].remark = this.purchaseForm.giftCard[0].remark;
                submitData.packageContains[
                  submitData.packageContains.length - 1
                ].tradeType = this.purchaseForm.giftCard[0].tradeType;
              }
              submitData.token = localStorage.token;
              submitData.packageContains = JSON.stringify(
                submitData.packageContains
              );
              this.$axios({
                url: base.baseUrl2 + "/v1/account/member-account/consume",
                method: "POST",
                header: { "content-type": "application/x-www-form-urlencoded" },
                data: submitData,
                transformRequest: [
                  function(data) {
                    let ret = "";
                    for (let it in data) {
                      ret +=
                        encodeURIComponent(it) +
                        "=" +
                        encodeURIComponent(data[it]) +
                        "&";
                    }
                    return ret;
                  }
                ]
              })
                .then(res => {
                  this.loadingPurchase = false;
                  this.btnPurchse = false;
                  if (res.data.status == 4000) {
                    this.alertTip(res.data.message);
                  } else if (res.data.status == 2000) {
                    this.$alert(res.data.data, "提示", {
                      confirmButtonText: "确定",
                      callback: action => {
                        this.dialogVisible = false;
                      }
                    });
                  } else if (res.data.status == 2001) {
                    this.$router.push("/login");
                  }
                })
                .catch(error => {
                  this.loadingPurchase = false;
                  this.btnPurchse = false;
                  console.log(error);
                  this.alertTip(
                    "网络异常收银失败，请检查网络稍后再试"
                  );
                });
            });
          });
        } else {
          this.alertTip("选项有误,不能提交");
        }
      });
    },
    alertTip(msg) {
      this.$alert(msg, "提示", {
        confirmButtonText: "确定"
      });
    },
    // 重置表单数据
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.packageData.splice(1);
      this.purchaseForm.packageContains.splice(0);
      this.purchaseForm.packageContains.push({
        payProductId: "",
        num: "",
        remark: "",
        payAmount: "",
        tradeType: 2015,
        otherType: false
      });
      this.purchaseForm.giftCard = [];
      this.purchaseForm.giftCard.push({
        payProductId: "",
        num: "",
        remark: "",
        payAmount: "",
        tradeType: 2017,
        otherType: false
      });
    }
  },
  mounted() {
    bus.$on("sendstuid", msg => {
      this.studentId = msg.userid;
      this.receiptform.account = msg.username;
      this.receiptform.username = msg.nickname;
      this.receiptform.memberId = msg.userid;
      this.purchaseForm.memberId = msg.userid;
    });
  },
  created() {
  }
};
</script>
<style scoped>
/*收银成功页面 begin*/
.cash {
  width: 420px;
  height: 200px;
  position: absolute;
  color: #606266;
  font-size: 16px;
  border: 1px solid #dcdfe6;
  top: 50%;
  left: 50%;
  margin-top: -153px;
  margin-left: -308px;
  background: white;
  z-index: 3000;
}
.cash_text {
  margin-top: 52px;
  margin-bottom: 70px;
  font-size: 16px;
  text-align: center;
}
.cash_btns {
  margin: 10px 50px;
}
/*收银成功页面 end*/
.giftText {
  float: right;
  margin-top: -30px;
  margin-right: 50px;
  color: #aaa;
}
.addBtnBox {
  text-align: right;
}
.box-card {
  margin-top: 10px;
}
#closeIcon {
  position: relative;
  left: 96%;
  font-size: 22px;
}
</style>


